

//表单账号验证:输入事件时:显示icon,

//获取元素
let input1=document.querySelector('.input1')
let input3=document.querySelector('.input3')
let input7=document.querySelector('.input7')
let input8=document.querySelector('.input8')
let input9=document.querySelector('.input9')
let input6=document.querySelector('.input6')

let icon3=document.querySelector('.icon3')
let icon7=document.querySelector('.icon7')
let icon5=document.querySelector('.icon5')
let icon6=document.querySelector('.icon6')

console.log(icon3,input1,input3);
/*
 *表单框输入值长度大于0的时候,显示icon图标,否则不显示
 */
//账号框注册事件
input1.addEventListener('input',function(){
    // console.log(9);
    if(input1.value.length>0){
      // console.log(9);
      icon3.style.display='block'
    }else{
      // console.log(0);
      icon3.style.display='none'
    }
  })
//手机号注册事件
input7.addEventListener('input',function(){
  // console.log(9);
  if(input7.value.length>0){
    // console.log(9);
    icon5.style.display='block'
  }else{
    // console.log(0);
    icon5.style.display='none'
  }
})
//验证码注册事件
input8.addEventListener('input',function(){
    // console.log(9);
    if(input8.value.length>0){
      // console.log(9);
      icon6.style.display='block'
    }else{
      // console.log(0);
      icon6.style.display='none'
    }
  })
  //密码注册事件
  input9.addEventListener('input',function(){
    // console.log(9);
    if(input9.value.length>0){
      // console.log(9);
      icon7.style.display='block'
    }else{
      // console.log(0);
      icon7.style.display='none'
    }
  })

  //给用户名的icon图标注册点击事件,点击图标清空表单框内容,并隐藏自己
  icon3.addEventListener('click',function(){
    input1.value=''
    icon3.style.display=''
  })

  //给手机号的icon图标注册点击事件
  icon5.addEventListener('click',function(){
    input7.value=''
    icon5.style.display=''
  })
  
  //给短信验证的icon图标注册点击事件
  icon6.addEventListener('click',function(){
    input8.value=''
    icon6.style.display=''
  })
  
  //给用密码的icon图标注册点击事件
  icon7.addEventListener('click',function(){
    input9.value=''
    icon7.style.display=''
  })

  /* 
  *失去焦点时验证:用户名.手机号.验证号.密码合法性,并且聚焦的时候,文本框有蓝色边框线,失焦灰色,并且合法不显示,不合法右边显示红色图标和提示文字
   */

  //1获取元素
let inputipt=document.querySelectorAll('.input1')

let tipcoment=document.querySelectorAll('.tipcoment')

let bottomregister=document.querySelector('.bottomregister')


console.log(inputipt,tipcoment,bottomregister);

  //2定义变量保存定义规则===正则表达式
  let regarr=[
    /^[a-zA-Z]\w{5,11}$/,   //6-12: 字母开头,后面跟字母\数字\下划线
    /^1[3456789][0-9]{9}$/, //11  : 
    /^[a-zA-Z]\w{3}$/,      //4位验证码: 字母开头,后面跟字母\数字\下划线
    /^[a-zA-Z]\w{5,11}$/    //6-12: 字母开头,后面跟字母\数字\下划线
  ]

  //3.需求:获取焦点时,表单框变成蓝色;
  inputipt.forEach(function(v,i){
    v.addEventListener('focus',function(){
        v.style.border='1px solid #48a5c6'
    })
  })
  
  //4.需求:当失去焦点时,表单边框恢复颜色;并且失去焦点时验证:用户名.手机号.验证号.密码合法性
  inputipt.forEach(function(v,i){
    v.addEventListener('blur',function(){
        //失去焦点时验证输入信息的合法性
        // console.log(regarr[i].test(v.value));验证通过正则验证数据的真假性
        let bool=regarr[i].test(inputipt[i].value)

        if(bool){//验证通过
            tipcoment[i].style.display=''
        }else{//验证失败验证通过正则验证数据的真假性
            tipcoment[i].style.display='block'
        }
    })
  })
   //整个函数的意思是:先遍历所有的表单框,v是里面对应的每一个表单框,i是每一个表单框对应的索引,在给每一个表单框注册失焦事件, v.style.border表示每一个表单框的边框样式,regarr[i]是数组保存的每一个正则表达式,正则表达式的语法是 正则.tast(验证的信息),再把这个赋给一个变量,通过判断变量的真假性去设置相应的样式
//    注意:因为表单框input1和密码错误提示内容tipcoment的索引都是对应的,所以可以直接通过获取到所有tipcoment后,不用遍历,直接用对应的索引号去设置样式

  //5.需求:点击立即注册bottomregister按钮,一起验证用户名.手机号.验证号.密码合法性,一个不合法都不能通过

bottomregister.addEventListener('click',function(){
    for(let i=0;i<inputipt.length;i++){

        let bool=regarr[i].test(inputipt[i].value)
        
        if(bool){//验证通过
            tipcoment[i].style.display=''

        }else{//验证失败验证通过正则验证数据的真假性

            tipcoment[i].style.display='block'
            return;
            //当一个表单框不合法点击提交,直接提示红色内容,一起验证
        }
    }
}) 

//6.需求6:当不勾选复选框的时候,立即注册禁用,当勾选了复选框select的时候,立即注册bottomregister可以用

//获取元素
let select=document.querySelector('.select')
console.log(select);

select.addEventListener('click',function(){
    if(select.checked){
        bottomregister.style.backgroundColor='#15bded'
        bottomregister.style.color='#fff'
        bottomregister.disabled=false//取消禁用
    }else{
        bottomregister.style.backgroundColor='#e0e0e0'
        bottomregister.style.color='#5f5f5f'
        bottomregister.disabled=true//设置提交按钮禁用
    }
})

